<template>
  <div>
    <h1>Father</h1>
    <button @click="changeChild1">修改child</button>
    <button @click="changeAll($refs)">修改所有</button>
    house: {{ house }}
    <Child1 ref="child1" />
    <Child2 ref="child2" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Child1 from "./Child1.vue";
import Child2 from "./Child2.vue";
let house = ref(42);
let child1 = ref();
//父亲直接修改子组件的toy属性
function changeChild1() {
  console.log("change child1", child1.value);
  child1.value.toy = "奥特吧";
}
function changeAll(refs: any) {
  for (const key in refs) {
    refs[key].count += 1;
  }
}
defineExpose({
  house,
});
</script>

<style scoped></style>
